<template>
    <div class="count">
        <h2>当前求和为：{{ sum }},放大十倍为：{{ bigSum }}</h2>
        <select v-model.number="n" class="type">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <a-button type="primary" @click="add">加</a-button>
        <a-button type="primary" @click="minus">减</a-button>
    </div>
</template>

<script setup lang="ts" name="Count">
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

import { ref } from "vue";




// 引入useCountStore
import { useCountStore } from '@/store/count'
// 引入storeToRefs
import { storeToRefs } from 'pinia';
// 使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore()
// 使用storeToRefs，将store中的数据转化为响应式数据
const { sum, bigSum } = storeToRefs(countStore)


// 数据
const value = ref([]);// 用于保存输入框的值
const n = ref(1) // 用于保存下拉框的值

// 方法
function add() {
    // 第一种修改方式（直接修改）
    // countStore.sum += 1

    // 第二种修改方式（修改整个对象）
    //  countStore.$patch({
    //   sum:888,
    //   school:'尚硅谷',
    //   address:'北京'
    // }) 

    // 第三种修改方式
    countStore.increment(n.value)
    // 调用 countStore 中的 increment action 方法来修改状态
}
function minus() {
    countStore.degression(n.value)
    // 调用 countStore 中的 degression action 方法来修改状态
}
</script>

<style scoped>
.count {
    background-color: rgb(252, 254, 255);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

.type {
    color: rgb(4, 161, 239);
    ;
}

select,
button {
    margin: 0 5px;
    height: 25px;
}
</style>